<!DOCTYPE html><!--声明文档类型为 HTML5。浏览器依据该声明，以 HTML5 标准解析和渲染页面-->
<html><!--HTML文档根标签，包含所有HTML元素-->
	<head><!--文档的头部区域，包含文档的元信息和样式表引用-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>基于边缘计算的居家健康与安全管家系统</title><!--标题-->
		<!--在 HTML 文档中嵌入 CSS 样式表，用于定义页面的样式。-->
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
		
			html,
			body {
				height: 100%;
			}
		
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				/* 替换为你的背景图路径 */
				background: url('333.png') center/cover no-repeat fixed;
			}
		
			.login {
				width: 400px;
				height: 250px;
				/* 透明磨砂效果 */
				background: rgba(255, 255, 255, 0.2);
				border-radius: 8px;
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.3);
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
			}
		
			.login h1 {
				height: 38px;
				width: 93%;
				background: rgba(255, 255, 255, 0.8);
				line-height: 38px;
				font-size: 30px;
				text-align: center;
				border-radius: 5px;
				margin: 15px auto;
				color: #67aaf1;
			}
		
			.login-form {
				width: 60%;
				margin: 0 auto;
			}
		
			.login-form form input {
				width: 220px;
				height: 30px;
				outline: none;
				margin: 10px auto;
				border-radius: 5px;
				border: 1px solid rgba(255, 255, 255, 0.3);
				background: rgba(255, 255, 255, 0.8);
				padding: 0 10px;
			}
		
			.button-group {
				text-align: center;
			}
		
			.button1 {
				line-height: 30px;
				height: 30px;
				width: 120px;
				color: #ffffff;
				background-color: rgba(74, 140, 247, 0.8);
				font-size: 16px;
				border: none;
				border-radius: 5px;
				cursor: pointer;
				transition: background-color 0.3s;
				margin-top: 10px;
			}
		
			.button1:hover {
				background-color: rgba(68, 107, 247, 0.9);
			}
		
			.footer {
				position: fixed;
				bottom: 0;
				height: 50px;
				font-size: 12px;
				text-align: center;
				font-family: "宋体";
				color: rgba(255, 255, 255, 0.8);
				text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
			}
		</style>
		<script>
			function register() {//用户注册功能
				// 获取标签名为usrname的标签，赋值给v
				var xhr = new XMLHttpRequest();//创建一个对象
				var url = "";
				xhr.open("post", url, true);
				
			}
			function login() {
				var xhr = new XMLHttpRequest();//创建一个对象
				var url = "";
				xhr.open("post", url, true);
				
			}
		</script>
	</head>
	<body>
		<div class="login">
			<h1>登录</h1>
			<div class="login-form">
				<form method="post"><!--表单提交方式为POST-->
					<!--输入框，name属性为username和password，placeholder属性为提示文本-->
					<input type="text" name="username" placeholder="请输入用户名" />
					<input type="password" name="password" placeholder="请输入密码" />
					<div class="button-group">
						<input type="submit" class="button1" value="登    陆" />
					</div>
				</form>
			</div>
		</div>
		<div class="footer">
			联系电话: 400-706-1880 &nbsp 技术支持QQ: 1075518049<br>
			开发商：华清远见济南研发中心 <a href="http://www.farsight.com.cn" target="_blank"></a>
		</div>
	</body>
</html>